<template>
  <div>
    <el-card class="box-card" v-show="open">
      <div class="el-date-picker">
        <el-radio-group v-model="tabPositi">
          <el-radio-button label="true">表格</el-radio-button>
          <el-radio-button label="false">折线图</el-radio-button>
          <el-radio-button label="false">柱状图</el-radio-button>
        </el-radio-group>
      </div>

      <div class="AndEl">
        <span class="spanAndEl">订单下单</span>
        <el-radio-group v-model="tabPosition" class="tabPosition">
          <el-radio-button label="tableData">金额</el-radio-button>
          <el-radio-button label="tabl">订单量</el-radio-button>
          <el-radio-button label="tableD">用户数</el-radio-button>
        </el-radio-group>
      </div>

      <div class="el-table">
        <el-table
          :data="add"
          height="300px"
          border
          :header-cell-style="{
            'background-color': 'rgb(64, 158, 255)',
            color: 'rgb(255, 255, 255)',
            font: '16px/20px arial,sans-serif',
            border: '1px rgb(64, 158, 255) solid',
          }"
          style="width: 100%"
        >
          <el-table-column prop="date" label="日期" width="200">
          </el-table-column>
          <el-table-column prop="name" label="整体"> </el-table-column>
          <el-table-column prop="address" label="故事会员"> </el-table-column>
          <el-table-column prop="address" label="听书会员"> </el-table-column>
          <el-table-column prop="address" label="故事"> </el-table-column>
          <el-table-column prop="address" label="知识付费"> </el-table-column>
          <el-table-column label="操作" width=160px>
            <template slot-scope="scope">
              <el-button
                @click="handleEdit(scope.row)"
                type="primary"
                size="small"
                >穿梭框
              </el-button>
              <!-- 直接删除 -->
              <el-button type="primary" size="small" @click="remove(scope.row)"
                >修改</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-button
      type="primary"
      icon="el-icon-share"
      size="medium"
      @click="asdf"
      style="margin-top: 30px"
    >
      返回
    </el-button>

    <poput
      :dialogVisible="dialogVisible"
      @dialogVisible="
        (value) => {
          this.dialogVisible = value;
        }
      "
    />
  </div>
</template>

<script>
import Poput from "./component/Poput.vue";
export default {
  components: {
    Poput,
  },
  data() {
    return {
      dialogVisible: false,
      tabPosition: "tableData",
      tabPositi: "true",
      open: true,
      add: this.tableData,
      tableData: [
        {
          date: "2016-05-02 ~ 2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016--03",
          name: "王虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tabl: [
        {
          date: "2016--02",
          name: "王虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-04",
          name: "王虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2005-01",
          name: "王虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2005-03",
          name: "虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableD: [
        {
          date: "2016",
          name: "虎",
          address: "1518 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016--03",
          name: "王虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      pickerOptions0: {
        disabledDate(time) {
          let curDate = new Date().getTime();
          let three = 365 * 24 * 3600 * 1000;
          let threeMonths = curDate - three;
          return time.getTime() > Date.now() || time.getTime() < threeMonths;
        },
      },
    };
  },
  watch: {
    tabPosition: {
      handler() {
        if (this.tabPosition == "tableData") {
          this.add = this.tableData;
        }
        if (this.tabPosition == "tabl") {
          this.add = this.tabl;
        }
        if (this.tabPosition == "tableD") {
          this.add = this.tableD;
        }
      },
      immediate: true,
      deep: true,
    },
    tabPositi: {
      handler() {
        if (this.tabPositi == "true") {
          this.open = true;
        }
        if (this.tabPositi == "false") {
          this.open = false;
        }
        if (this.tabPositi == "false") {
          this.open = false;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleEdit() {
      this.dialogVisible = true;
    },
    remove(){
      
    },
    asdf() {
      this.open = true;
      this.tabPositi = true;
    },
  },
};
</script>

<style scoped>
.box-card {
  width: 100%;
  height: 100%;
  position: relative;
}
.el-date-picker {
  width: 256px;
  margin-top: 30px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
}
.el-table {
  margin-top: 40px;
}
.spanAndEl {
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0;
  left: -108px;
  z-index: 100;
  font-size: 18px;
  line-height: 40px;
}
.AndEl {
  width: 249px;
  margin-top: 30px;
  position: absolute;
  top: 0;
  left: 130px;
  z-index: 100;
  font-size: 18px;
}
</style>
